<template>
  <div>
    <!-- // 调度对话框 -->

    <el-dialog title="行程详情" :visible.sync="mOrderDetailDialog" width="40%" :before-close="updateDetail=false">
      <div v-if="mDetailLoading" style="text-align: center;min-height:400px">
        <i class="el-icon-loading" style="font-size:20px"></i>
      </div>
      <div class="borderMain" v-else>
        <el-row>
          <el-col :span="4" class="borderAround">申请人</el-col>
          <el-col :span="8" class="borderAround">{{mSelectRow.applyUserName}}</el-col>
          <el-col :span="4" class="borderAround">申请部门</el-col>
          <el-col :span="8" class="borderAround">{{mSelectRow.applyPartmentName}}</el-col>
        </el-row>

        <el-row>
          <el-col :span="4" class="borderAround">行程状态</el-col>
          <el-col :span="8" class="borderAround">{{mSelectRow.status}}</el-col>
          <el-col :span="4" class="borderAround">允许拼车</el-col>
          <el-col :span="8" class="borderAround">{{mSelectRow.strPinChe}}</el-col>
        </el-row>

        <el-row>
          <el-col :span="4" class="borderAround">联系电话</el-col>
          <el-col :span="8" class="borderAround">{{mSelectRow.tel}}</el-col>
          <el-col :span="4" class="borderAround">用车人数</el-col>
          <el-col :span="8" class="borderAround">{{mSelectRow.passengersNum}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="borderAround">用车类型</el-col>
          <el-col :span="8" class="borderAround">{{mSelectRow.strOrderType}}</el-col>
          <el-col :span="4" class="borderAround">需要车辆数</el-col>
          <el-col :span="8" class="borderAround">2</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="borderAround">出发地</el-col>
          <el-col :span="8" class="borderAround">{{mSelectRow.setoffAddress}}</el-col>
          <el-col :span="4" class="borderAround">目的地</el-col>
          <el-col :span="8" class="borderAround">{{mSelectRow.arrivalAddress}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="borderAround">出发时间</el-col>
          <el-col :span="8" class="borderAround">{{mSelectRow.setoffTime}}</el-col>
          <el-col :span="4" class="borderAround">预计返回时间</el-col>
          <el-col :span="8" class="borderAround">{{mSelectRow.backTime}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="borderAround">申请事由</el-col>
          <el-col :span="20" class="borderAround">{{mSelectRow.applyReason}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="borderAround">备注说明</el-col>
          <el-col :span="20" class="borderAround">{{mSelectRow.note}}</el-col>
        </el-row>
      </div>

      <el-table
        :data="mSelectRow.lstCD"
        border
        style="margin-top:10px"
        v-if="mSelectRow.lstCD&&mSelectRow.lstCD.length>0"
      >
        <el-table-column label="司机">
          <template slot-scope="scope">
            <!-- <el-input v-if="updateDetail" v-model="driverId"></el-input> -->
            <el-select v-if="updateDetail" v-model="driverId"><el-option  :value="item.userId" :label="item.name" v-for="item of driverList" :key="item.userId"></el-option> </el-select>
            <span v-else >{{scope.row.driver.name}}（{{scope.row.driver.tel}}）</span>
            
          </template>
        </el-table-column>
        <el-table-column label="车辆">
          <template slot-scope="scope">
            <el-input v-if="updateDetail" v-model="name"></el-input>
            <span v-else>{{scope.row.car.name}}（{{scope.row.car.chepai}}）</span>
          </template>
        </el-table-column>

        <el-table-column label="状态">
          <template slot-scope="scope">
            <span>{{scope.row.strStatus}}</span>
          </template>
        </el-table-column>
          <el-table-column label="操作">
          <template slot-scope="scope"> 
            <el-button type="text" v-if="!updateDetail" @click="driverId=scope.row.driver.driverId;name=scope.row.car.name;updateDetail=true"><span>编辑</span></el-button>
            <el-button type="text" v-if="updateDetail" @click="saveInfo"><span>保存</span></el-button>
            <el-button type="text" v-if="updateDetail" plain @click="updateDetail=false" ><span>取消</span></el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-dialog>
  </div>
</template>


<style >
.mainDiv {
  min-width: 100%;
}
.topRow {
  min-width: 100%;
  background: white;
  padding: 10px;
  border-radius: 2px;
  color: #606266;
  font-size: 16px;
}
.spanPoint {
  cursor: pointer;
}
.borderMain {
  border-style: solid;
  border-color: #ebeef5;
  border-width: 1px;
}
.borderAround {
  padding: 10px;
  border-style: solid;
  border-color: #ebeef5;
  border-width: 1px;
}
.ctrlCard {
}
</style>



<script>
import {
  getRequestHeader,
  loginApi,
  getThirdCompanyApi
} from "../../api/user.js";
import { getCarsApi } from "../../api/car.js";
import { getNowFormatDate, getWeekToday, logxApi } from "../../api/util.js";
import { turnOrderType, turnOrderStatus } from "../../api/orderHelper.js";
import {
  queryControllerOrdersApi,
  getDriversApi,
  dispatchOrderApi,
  dispatchThirdCompanyApi,
  closeOrderApi,
  getOrderDetailApi
} from "../../api/order.js";
import { Loading } from "element-ui";
import { updataInfo } from '../../api/message.js'
import request from '../../api/request.js'
export default {
  data() {
    return {
      driverList:[],
      updateDetail:false,
      // updateDetailForm:{
      //   car:"",
      //   driver:"",
      // },
      name:'',
      orderId: '',
      driverId:'',
      mOrderDetailDialog: undefined,
      mSelectRow: undefined,
      mDetailLoading: false,
      status:''
    };
  },
  created() {
    this.getDriversListInfo()
  },
  mounted() {
    // this.getThridCompany();
    // this.queryControllerOrders();
    console.log(updateDetailForm)
  },
  methods: {
    getDriversListInfo(){
      request({
        method:"post",
        url:"/order/getAllDriver"
      }).then(res=>{
        this.driverList = res.data.data
        console.log(this.driverList)
      })
    },
    saveInfo(orderId){
      request({
        url:'/order/updDriverInOrder',
        method:'post',
        data: {
          orderId: this.orderId,
          driverId: this.driverId,
          name: this.name
        }
      }).then(res => {
        console.log(res)
        this.$confirm('确认修改？')
        this.getDriversListInfo()
      }).catch(err => {
        console.log(err)
      })
    },
    showFullLoading() {
      this.mFullLoading = Loading.service({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    },
    clsoeFullLoading() {
      if (this.mFullLoading) {
        this.mFullLoading.close();
      }
    },
    showOrderDetailDialog(order) {
      this.mOrderDetailDialog = true;
      this.getOrderDetail(order.id);
      console.log(order.id)
    },
    getOrderDetail(orderId) {
      var that = this;
      that.mDetailLoading = true;
      getOrderDetailApi(
        orderId,
        getRequestHeader(),
        new (function() {
          this.fail = function(msg) {
            that.mDetailLoading = true;
          };
          this.success = function(data) {
            var order = data;
            console.log(order)
            order.strOrderType = turnOrderType(order.orderType);
            order.status = turnOrderStatus(order.status);
            this.status = order.status
            console.log(this.status)
            if (order.applyUser && order.applyUser.tel) {
              order.tel = order.applyUser.tel;
            } else {
              order.tel = "-";
            }

            if (order.allowCarpooling == "yes") {
              order.strPinChe = "是";
            } else {
              order.strPinChe = "否";
            }
            if (order.lstCD) {
              order.lstCD.forEach(element => {
                if (element.status == "using") {
                  element.strStatus = "待出发";
                } else {
                  element.strStatus = turnOrderStatus(element.status);
                }
              });
            }

            logxApi(order);
            that.mSelectRow = order;
            console.log( that.mSelectRow.lstCD[0].orderId)
            var orderId = that.mSelectRow.lstCD[0].orderId
            that.orderId = orderId
            console.log(that.orderId)
            that.mDetailLoading = false;
          };
        })()
      );
    }

    //----------over methods------
  }
};
</script>